<template>
    <!-- 放款管理>法务审核 -->
    <div class="postloanaview">

        <div class="div">
            <div class="kuangxuan">
                <el-select v-model="value" class="m-2" placeholder="企业名称">
                    <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="input">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <input v-model="input" placeholder="请输入要查询的核心企业名称" class="inputs" />
                </div>
                <el-select v-model="value" class="m-2" placeholder="五级分类">
                    <el-option v-for="item in xlxllist" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <div class="caozuo">
                    <el-button type="primary">查询</el-button>
                    <el-button>重置</el-button>
                </div>
            </div>

            <div class="caozuos">
                <el-button type="primary" plain>导出</el-button>
                <el-button type="primary" plain @click="choting">新增</el-button>
            </div>

        </div>



    </div>
    <!-- 表格部分 -->
    <div class="table">
        <el-table :data="tableData" style="width: 100%" :fit="true">
            <el-table-column prop="date" label="序号"></el-table-column>
            <el-table-column prop="date" label="企业名称" width="180"></el-table-column>
            <el-table-column prop="address" label="社会信用代码"></el-table-column>
            <el-table-column prop="address" label="借款金额"></el-table-column>
            <el-table-column prop="address" label="业务员"></el-table-column>
            <el-table-column prop="address" label="登记人"></el-table-column>
            <el-table-column prop="address" label="逾期期数"></el-table-column>
            <el-table-column prop="address" label="逾期天数"></el-table-column>
            <el-table-column prop="" label="任务开始时间"></el-table-column>
            <el-table-column prop="" label="操作">
                <div class="tubiao">
                    <span @click="biaoge">
                        <el-icon><View /></el-icon>
                    </span>
                    <span text @click="open">
                        <el-icon><Promotion /></el-icon>
                    </span>
                    
                </div>
            </el-table-column>
        </el-table>
        
    </div>
     <!-- 抽屉 -->
     <div class="choti">
        <el-drawer v-model="drawer" title="贷款五级分类" :direction="direction" :before-close="handleClose">
            <el-form :model="form" label-width="120px">
                <el-form-item label="借贷品种:">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="社会信用代码:">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="借款金额:">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="借款期限:">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="还款情况:">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="分类等级:">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item>
                <el-button type="primary" @click="onSubmit(formref)">
                {{"新增"}}
            </el-button>
            </el-form-item>
            </el-form>

        </el-drawer>

    </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';

//弹框
import { markRaw } from 'vue'
import { ElMessageBox } from 'element-plus'
import { QuestionFilled } from '@element-plus/icons-vue'


import { reactive } from 'vue'//抽屉
var router = useRouter();

var drawer = ref(false)//抽屉

var flag = ref(false)
//抽屉
const form = reactive({
    name: '',
})
var xlxllist = [
    {
        value: '企业管理1',
        label: '企业管理',
    },
]


const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189',
    },
]
// const change=()=>{
//     flag=true
// }
const biaoge = () => {
    router.push('/home/loan/loanaone')
}


// 弹框内容
const open = () => {
    ElMessageBox.confirm(
        '是否确认要提交资产保全申请',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            icon: markRaw(QuestionFilled),
            center: true,
        }
    )
}
var choting = () => {// 打开抽屉
    drawer.value = true
}
</script>

<style scoped>
.postloanaview .div {
    display: flex;
    justify-content: space-between;
    width: 98%;
    padding: 20px
}

.kuangxuan {
    width: 50%;
    display: flex;
    justify-content: space-between;
}

table {
    position: relative;
}

.title {
    width: 200px;
    height: 40px;
    background-color: aqua;
    text-align: center;
    line-height: 40px;
    color: white;
    font-size: 20px;
    font-weight: bold;
    border-radius: 30px;

}

.m-2 {
    width: 140px;
}

.postloanaview .input {
    width: 300px;
    height: 30px;
    border: 1px solid #e5e7ec;
    display: flex;
    align-items: center;
    justify-content: space-around;


}

.postloanaview .inputs {
    width: 260px;
    height: 28px;
    border: none;
}

.tubiao {
    width: 100px;
    height: 40px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #4ba7fe;
    margin: auto;
}

.tubiao span {
    font-size: 20px;
    display: none;
}

.tubiao:hover span {
    display: block;
}

.yema {
    position: absolute;
    left: 50%;
    margin-left: -200px;
    bottom: 100px;

}</style>